<template>
    <div class="myghym">
      <p style="text-align: center; margin-top: 15px">
        <span style="font-weight: 700; font-size: 28px; color: #000"
          >国家免疫规划疫苗接种记录</span
        >
      </p>
      <table class="tab_sty_3" cellspacing="0" style="width: 100%">
        <tr>
          <th>证件类型</th>
          <td>身份证</td>
          <th>证件号码</th>
          <td style="width: 53%">
            <span
              v-for="(item, index) in 档案号"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </td>
          <th>姓名</th>
          <td>{{ info.residentName }}</td>
          <th>性别</th>
          <td>男</td>
          <th>出生日期</th>
          <td>1974年04月18日</td>
        </tr>
      </table>
      <table class="tab_sty_7" cellspacing="0" style="width: 100%">
        <tr style="margin-top: 30px; display: inline-block;width: 100%;">
          <th>序号</th>
          <th>剂次</th>
          <th>疫苗名称</th>
          <th>疫苗批号</th>
          <th>生产企业</th>
          <th>接种时间</th>
          <th>接种单位</th>
        </tr>
        <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
      </table>
    </div>
  </template>
      
      <script>
  export default {
    data() {
      return {
        info: {},
        options: [
          {
            value: "测试",
            label: "测试",
          },
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
          ],
        },
        value2: "",
        档案号: "430522197404187818",
      };
    },
    mounted(){
    this.getdata();
  },
  methods:{
    getdata() {
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        this.info = res.data[0];
        this.info.groupType =  [...this.info.groupType.toString()];
        this.info.medicineAllergy =  [...this.info.medicineAllergy.toString()];
       
      });
    },
  }
  };
  </script>
      
      <style scoped lang="scss">
  .myghym {
    .top {
      padding: 10px 20px;
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
    }
    .tab1 {
      tr {
        width: 100%;
        th {
          text-align: center;
          color: #000;
          background-color: rgb(250, 250, 250);
        }
        td {
          padding: 10px;
        }
      }
    }
    .box {
      padding: 10px 250px;
      background-color: rgb(250, 250, 250);
      margin: 10px 0;
    }
    .tab_sty {
      border-collapse: collapse;
      th {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 15%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        background-color: #fafafa;
        border: 1px solid rgb(217, 217, 217);
      }
      td {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 35%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        border: 1px solid rgb(217, 217, 217);
        text-align: left;
      }
      .no_bd {
        display: inline-block;
        padding: 0px 6px;
        margin: 0 3px;
      }
      .yes_bd {
        font-size: 12px;
        display: inline-block;
        padding: 0px 4px;
        margin: 0 3px;
        border: 1px solid #000;
      }
    }
    .tab_sty_3 {
      border-collapse: collapse;
      th {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 13%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        background-color: #fafafa;
        border: 1px solid rgb(217, 217, 217);
      }
      td {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 20%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        border: 1px solid rgb(217, 217, 217);
        text-align: left;
      }
      .no_bd {
        display: inline-block;
        padding: 0px 6px;
        margin: 0 3px;
      }
      .yes_bd {
        display: inline-block;
        padding: 0px 4px;
        margin: 0 3px;
        border: 1px solid #000;
      }
    }
    .tab_sty_7 {
      border-collapse: collapse;
      th {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 14.2%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        background-color: #fafafa;
        border: 1px solid rgb(217, 217, 217);
      }
      td {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 14.2%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        border: 1px solid rgb(217, 217, 217);
        text-align: left;
      }
      .no_bd {
        display: inline-block;
        padding: 0px 6px;
        margin: 0 3px;
      }
      .yes_bd {
        display: inline-block;
        padding: 0px 4px;
        margin: 0 3px;
        border: 1px solid #000;
      }
    }
    .no_bdb {
      td {
        border-bottom: none;
      }
    }
  }
  ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000;
  }
  ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: #fff;
  }
  ::v-deep .el-radio__input.is-disabled .el-radio__inner,
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #fff;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    color: #000;
  }
  </style>